<template>
	<view class="donation-container">
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
		</tn-nav-bar>

		<!-- 捐赠人姓名-->
		<view class="donation-item">
			<view class="icon tn-icon-my"></view>
			<input class="input" maxlength="20" placeholder="请输入您的姓名" v-model="form.name" />
		</view>

		<!-- 捐款活动名称-->
		<view class="donation-item">
			<view class="icon tn-icon-gift"></view>
			<picker mode="selector" :range="activityNames" @change="handleActivityChange" class="picker">
				<view class="picker-text">{{ form.activityName || '请选择捐款活动名称' }}</view>
			</picker>
		</view>

		<!-- 捐赠金额-->
		<view class="donation-item" v-if="isMoneyRelatedActivity">
			<view class="icon tn-icon-money"></view>
			<input class="input" type="number" placeholder="请输入捐赠金额（元）" v-model.number="form.amount" />
		</view>

		<!-- 捐赠方式 -->
		<view class="donation-item" v-if="isMoneyRelatedActivity">
			<view class="icon tn-icon-pay"></view>
			<picker mode="selector" :range="paymentMethods" @change="handlePaymentChange" class="picker">
				<view class="picker-text">{{ form.paymentMethod || '请选择捐赠方式' }}</view>
			</picker>
		</view>

		<!-- 定向捐赠单选组 -->
		<view class="donation-item">
			<view class="icon tn-icon-direction"></view>
			<view class="label">是否定向：</view>
			<tn-radio-group v-model="directionalValue" @change="handleDirectionalChange" class="radio-group">
				<tn-radio v-for="(item, index) in directionalList" :key="index" :name="item.name"
					:disabled="item.disabled">
					{{ item.name }}
				</tn-radio>
			</tn-radio-group>
		</view>

		<!-- 定向描述文本框 -->
		<view class="donation-item" v-if="directionalValue === '是'">
			<view class="icon tn-icon-description"></view>
			<input class="input" maxlength="200" placeholder="请输入定向捐赠描述（例如：指定用于XX学院）" v-model="form.directionalDesc" />
		</view>

		<!-- 捐赠留言 -->
		<view class="donation-item donation-item--textarea">
			<view class="icon tn-icon-comment"></view>
			<textarea class="textarea" placeholder="请输入捐赠留言（可选）" v-model="form.remark" />
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" v-if="!isMoneyRelatedActivity || (isMoneyRelatedActivity && form.paymentMethod && form.amount > 0)">
			<button class="btn" :loading="submitting" @click="submitDonation">
				确认捐赠
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				submitting: false,
				form: {
					name: '',
					activityName: '',
					amount: 0,
					paymentMethod: '',
					directionalDesc: '', // 定向捐赠描述
					remark: ''
				},
				activityNames: ['支持母校建设', '设立奖学金', '图书捐赠', '医疗设备资助', '校园绿化', '教学设备'],
				paymentMethods: ['现金捐赠', '支付宝支付', '微信支付', 'XX银行支付'],
				// 标记活动是否与金钱相关
				isMoneyRelatedActivity: true,
				directionalList: [
					{ name: '是', disabled: false },
					{ name: '否', disabled: false }
				],
				directionalValue: '否' 
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleActivityChange(e) {
				const activityName = this.activityNames[e.detail.value]
				this.form.activityName = activityName
			
				const nonMoneyActivities = ['图书捐赠', '医疗设备资助', '教学设备']
				this.isMoneyRelatedActivity = !nonMoneyActivities.includes(activityName)
				
				if (!this.isMoneyRelatedActivity) {
					this.form.amount = 0
					this.form.paymentMethod = ''
				}
			},
			handlePaymentChange(e) {
				this.form.paymentMethod = this.paymentMethods[e.detail.value]
			},
			handleDirectionalChange(val) {
				this.directionalValue = val
				// 切换为“否”时清空定向描述
				if (this.directionalValue === '否') {
					this.form.directionalDesc = ''
				}
			},
			validateForm() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return false
				}
				if (!this.form.activityName) {
					uni.showToast({
						title: '请选择捐款活动名称',
						icon: 'none'
					})
					return false
				}
				
				if (this.directionalValue === '是' && !this.form.directionalDesc.trim()) {
					uni.showToast({
						title: '请输入定向捐赠描述',
						icon: 'none'
					})
					return false
				}
				if (this.isMoneyRelatedActivity) {
					if (this.form.amount <= 0) {
						uni.showToast({
							title: '请输入有效金额',
							icon: 'none'
						})
						return false
					}
					if (!this.form.paymentMethod) {
						uni.showToast({
							title: '请选择捐赠方式',
							icon: 'none'
						})
						return false
					}
				}
				return true
			},
			submitDonation() {
				if (!this.validateForm()) return
				this.submitting = true
				setTimeout(() => {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					this.form = {
						name: '',
						activityName: '',
						amount: 0,
						paymentMethod: '',
						directionalDesc: '',
						remark: ''
					}
					this.isMoneyRelatedActivity = true
					this.directionalValue = '否' // 重置定向选择为默认值
					this.submitting = false
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.donation-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-top: 150rpx;
	}

	/* 表单项通用样式 */
	.donation-item {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 24rpx;
	}

	.donation-item--textarea {
		align-items: flex-start;
		padding-top: 32rpx;
	}

	/* 图标样式 */
	.icon {
		font-size: 38rpx;
		color: #007356;
		margin-right: 24rpx;
		margin-top: 2rpx;
	}

	/* 新增：标签文本样式（是否定向） */
	.label {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	/* 输入框样式 */
	.input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding: 6rpx 0;
		background: transparent;
	}

	.input::placeholder,
	.textarea::placeholder {
		color: #c0c4cc;
		font-size: 26rpx;
	}

	/* 下拉选择器样式 */
	.picker {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.picker-arrow {
		font-size: 24rpx;
		color: #c0c4cc;
		margin-left: 12rpx;
	}

	/* 文本域样式 */
	.textarea {
		flex: 1;
		min-height: 140rpx;
		font-size: 28rpx;
		color: #333;
		padding: 6rpx 0;
		background: transparent;
		border: none;
		resize: none;
	}

	/* 提交按钮样式 */
	.submit-btn {
		padding: 40rpx 24rpx 20rpx;
	}

	.btn {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(45deg, #008662, #007356);
		color: #fff;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 16rpx rgba(54, 144, 250, 0.2);
		border: none;
	}

	.btn[loading] {
		background: linear-gradient(90deg, #409eff, #3690fa);
		opacity: 0.9;
	}

	.custom-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 24rpx;
	}

	/* 定向捐赠单选组样式 */
	.radio-group {
		flex: 1;
		display: flex;
		gap: 40rpx;
	}

	.tn-radio {
		font-size: 28rpx;
		color: #333;
	}
</style>